<template>
  <view class="content-page">
    <u-cell-group>
      <u-cell-item
        v-for="item in experienceAll"
        :key="item.id"
        :title="item.name"
        @click="cellClick(item.name, item.expType)"
      >
      </u-cell-item>
    </u-cell-group>
  </view>
</template>
<script lang="ts" setup>
import { px2rpx } from '@/utils/tools';
import { getUserExperiencelist } from '@/api/modules/user';
import { useUserStoreWidthOut } from '@/stores/user';

const asyncUser = useUserStoreWidthOut();
const userInfo: any = asyncUser.getUserInfo;

const experienceAll = [
  { name: '教育经历', id: '#education', expType: 1 },
  { name: '工作经历', id: '#work', expType: 3 },
  { name: '研究经验', id: '#research', expType: 5 },
  { name: '专业治疗领域', id: '#treatment', expType: 6 },
  { name: '专业资格证', id: '#qualifications', expType: 7 },
  { name: '培训经历', id: '#train', expType: 2 },
  { name: '附加信息', id: '#additional', expType: 8 },
];

const experienceList = ref([]);
const reloadTableData = () => {
  getUserExperiencelist({ userId: userInfo.userId })
    .then((res: any) => {
      experienceList.value = res;
    })
    .catch(() => {
      experienceList.value = [];
    });
};

const cellClick = (title: string, expType: number) => {
  (uni as any).$Router.push({
    name: 'experienceDetails',
    params: {
      title,
      expType,
    },
  });
};

onMounted(() => {
  reloadTableData();
});
</script>
<style lang="scss">
.btn-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding: 20rpx;
}
.content-page {
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
